<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>echart123</title>
		<script type="text/javascript" src="../../js/echarts.min.js"></script>
	</head>

	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			};

			var option1 = {
				backgroundColor: '#050038',
				title: {
					text: '',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 25,
						color: 'rgb(97, 142, 205)'
					}
				},
				series: [{
						type: 'liquidFill',
						radius: '45%',
						center: ['50%', '50%'],
						data: [0.5, 0.5, 0.5], // data个数代表波浪数
						backgroundStyle: {
							borderWidth: 1,
							color: 'rgb(255,0,255,0.1)'
						},
						label: {
							normal: {
								formatter: (0.5 * 100).toFixed(2) + '%',
								textStyle: {
									fontSize: 50
								}
							}
						},
						outline: {
							show: false,
						}
					},
					{
						"type": "pie",
						"center": ["50%", "50%"],
						"radius": ["50%", "52%"],
						"hoverAnimation": false,
						"data": [{
								"name": "",
								"value": 500,
								labelLine: {
									show: false
								},
								itemStyle: {
									color: '#5886f0'
								},
								emphasis: {
									labelLine: {
										show: false
									},
									itemStyle: {
										color: '#5886f0'
									},
								}
							},
							{ //画中间的图标
								"name": "",
								"value": 4,
								labelLine: {
									show: false
								},
								itemStyle: {
									color: '#ffffff',
									"normal": {
										"color": "#5886f0",
										"borderColor": "#5886f0",
										"borderWidth": 20,
										// borderRadius: '100%'
									},
								},
								label: {

									borderRadius: '100%'
								},
								emphasis: {
									labelLine: {
										show: false
									},
									itemStyle: {
										color: '#5886f0'
									},
								}

							},
							{ // 解决圆点过大后续部分显示明显的问题
								"name": "",
								"value": 4.5,
								labelLine: {
									show: false
								},
								itemStyle: {
									color: '#5886f0'
								},
								emphasis: {
									labelLine: {
										show: false
									},
									itemStyle: {
										color: '#5886f0'
									},
								}
							},
							{ //画剩余的刻度圆环
								"name": "",
								"value": 88,
								itemStyle: {
									color: '#050038'
								},
								"label": {
									show: false
								},
								labelLine: {
									show: false
								},
								emphasis: {
									labelLine: {
										show: false
									},
									itemStyle: {
										color: '#050038'
									},
								}
							}
						]
					}

				]
			}

			// 使用刚指定的配置项和数据显示图表。
//			myChart.setOption(option);
			myChart.setOption(option1);
		</script>
	</body>

</html>